<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in dicts" :key="index" :label="item.label" :name="item.value">
          <div :id="`tb${index}`"></div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  props: ['parentData'],
  data() {
    return {
      dicts: [],
      activeName: "",
      chartIndex: "0",
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
    };
  },
  computed: {
  },
  created() {
    this.getWeeklyDicts();
  },
  watch: {
    parentData(newVal) {
      console.log('周计划-子组件的数据已更新:', newVal);
      this.getWeeklyDicts();
    },
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.chartIndex = tab.index;
      this.getData();
    },
    getWeeklyDicts(){
      let url = "http://"+this.hostIP+":9500/api/bigscreen/getWeeklyDicts";
      axios.get(url,{ withCredentials: true }) // 使用 params 参数传递查询参数
        .then(res => {
        this.dicts = res.data;
        if(this.parentData.endsWith("片区")||this.parentData=="省外"){
          this.activeName = this.parentData;
        }else{
          this.activeName = res.data[0].value;
        }
        for(let i=0;i<res.data.length;i++){
          if(res.data[i].value==this.activeName){
            this.chartIndex = i;
          }
        }
        let surl = "http://"+this.hostIP+":9500/api/bigscreen/getWeeklyAreaData?area="+res.data[0].value;
        axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
        axios.get(surl) // 使用 params 参数传递查询参数
        .then(res1 => {
          let obj = document.getElementById("tb"+this.chartIndex);
          obj.innerHTML = "";
          let str = "";
          str += "<table style='width: 99%;border-collapse: collapse;background-color: transparent;'>";
          str += "<thead>";
          str += "<tr><th colspan='4' style='border: 1px solid aqua;height:24px;vertical-align: middle;color:orange;'>"+res1.data.title+"</th></tr>";
          str += "<tr><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>品类名称</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>目标(万)</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>达成(万)</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>达成率(%)</th></tr>";
          str += "</thead>";
          str += "<tbody>";
          let desc = "";
          for(let i=0;i<res1.data.list.length;i++){
            let target = "";
            if(Number(res1.data.list[i].target)==0){
              target = "-";
            }else{
              target = res1.data.list[i].target;
            }
            let finished = "";
            if(Number(res1.data.list[i].finished)==0){
              finished = "-";
            }else{
              finished = res1.data.list[i].finished;
            }
            let rate = "";
            if(Number(res1.data.list[i].rate)==0){
              rate = "-";
            }else{
              rate = res1.data.list[i].rate;
            }
            str += "<tr>";
            str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;' align=center>"+res1.data.list[i].name+"</td>";
            str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:#FFA500;' align=center>"+target+"</td>";
            str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:lightgreen;' align=center>"+finished+"</td>";
            str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:red;' align=center>"+rate+"</td>";
            str += "</tr>";
            if(i==res1.data.list.length-1){
              desc += res1.data.list[i].desc+"。";
            }else{
              desc += res1.data.list[i].desc+";";
            }
          }
          str += "</tbody>";
          str +="</table>";
          str += "<span style='font-size:12px;color:orange;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+desc+"</span>";
          obj.innerHTML = str;
          this.switper()
        });
      });
    },
    getData(){
      let surl = "http://"+this.hostIP+":9500/api/bigscreen/getWeeklyAreaData?area="+this.activeName;
      axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
        .then(res1 => {
        let obj = document.getElementById("tb"+this.chartIndex);
        obj.innerHTML = "";
        let str = "";
        str += "<table style='width: 99%;border-collapse: collapse;background-color: transparent;'>";
        str += "<thead>";
        str += "<tr><th colspan='4' style='border: 1px solid aqua;height:24px;vertical-align: middle;color:orange;'>"+res1.data.title+"</th></tr>";
        str += "<tr><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>品类名称</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>目标(万)</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>达成(万)</th><th style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;'>达成率(%)</th></tr>";
        str += "</thead>";
        str += "<tbody>";
        let desc = "";
        for(let i=0;i<res1.data.list.length;i++){
          let target = "";
          if(Number(res1.data.list[i].target)==0){
            target = "-";
          }else{
            target = res1.data.list[i].target;
          }
          let finished = "";
          if(Number(res1.data.list[i].finished)==0){
            finished = "-";
          }else{
            finished = res1.data.list[i].finished;
          }
          let rate = "";
          if(Number(res1.data.list[i].rate)==0){
            rate = "-";
          }else{
            rate = res1.data.list[i].rate;
          }
          str += "<tr>";
          str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:aqua;' align=center>"+res1.data.list[i].name+"</td>";
          str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:#FFA500;' align=center>"+target+"</td>";
          str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:lightgreen;' align=center>"+finished+"</td>";
          str += "<td style='border: 1px solid aqua;height:24px;vertical-align: middle;color:red;' align=center>"+rate+"</td>";
          str += "</tr>";
          if(i==res1.data.list.length-1){
            desc += res1.data.list[i].desc+"。";
          }else{
            desc += res1.data.list[i].desc+";";
          }
        }
        str += "</tbody>";
        str +="</table>";
        str += "<span style='font-size:12px;color:orange;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+desc+"</span>";
        obj.innerHTML = str;
        this.switper()
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
  },
};
</script>
<style lang='scss' scoped>
/* 修改所有标签的字体颜色 */
::v-deep .el-tabs__item {
  color: white; /* 默认字体颜色 */
}

/* 修改被激活的标签的字体颜色 */
::v-deep .el-tabs__item.is-active {
  color: aqua; /* 激活状态的字体颜色 */
}

/* 修改激活状态的标签的分割线颜色 */
::v-deep .el-tabs__item.is-active {
  border-bottom-color: #13ce66; /* 激活状态的标签底部颜色为绿色 */
}

::v-deep .el-tabs__active-bar {
	background-color:aqua;
}
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }


    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #E6A23C;
        font-size: 15px;
      }
    }

  }
}

.right_center_wrap {
  overflow: hidden;
  width: 100%;
  height: 250px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>